<template>
  <view class="account-info-container">
    <!-- 顶部栏 -->
    <view class="header">
      <view class="back-btn" @tap="goBack">
        <text class="back-icon">←</text>
      </view>
      <text class="header-title">账户与安全</text>
      <view class="save-btn" @tap="saveChanges" :class="{ 'disabled': !hasChanges }">
        <text class="save-text">保存</text>
      </view>
    </view>
    
    <!-- 头像设置 -->
    <view class="avatar-section">
      <view class="avatar-container" @tap="changeAvatar">
        <image :src="userInfo.avatar" class="user-avatar"/>
        <view class="avatar-mask">
          <text class="edit-icon">✏️</text>
        </view>
      </view>
      <text class="avatar-hint">点击更换头像</text>
    </view>
    
    <!-- 基本信息 -->
    <view class="info-section">
      <view class="info-item">
        <text class="info-label">昵称</text>
        <input type="text" v-model="userInfo.nickname" class="info-input" placeholder="请输入昵称"/>
      </view>
      
      <view class="info-item">
        <text class="info-label">性别</text>
        <view class="gender-selector" @tap="showGenderPicker">
          <text class="gender-text">{{ getGenderText(userInfo.gender) }}</text>
          <text class="arrow-icon">→</text>
        </view>
      </view>
      
      <view class="info-item">
        <text class="info-label">地区</text>
        <view class="region-selector" @tap="showRegionPicker">
          <text class="region-text">{{ getRegionText() }}</text>
          <text class="arrow-icon">→</text>
        </view>
      </view>
      
      <view class="info-item">
        <text class="info-label">个性签名</text>
        <input type="text" v-model="userInfo.signature" class="info-input" placeholder="介绍一下自己吧" maxlength="50"/>
      </view>
    </view>
    
    <!-- 安全设置 -->
    <view class="security-section">
      <text class="section-title">安全设置</text>
      
      <view class="security-item" @tap="bindPhone">
        <text class="security-text">绑定手机号</text>
        <text class="security-status">{{ userInfo.phone ? '已绑定' : '未绑定' }}</text>
      </view>
      
      <view class="security-item" @tap="setPaymentPassword">
        <text class="security-text">设置支付密码</text>
        <text class="security-status">{{ userInfo.hasPaymentPassword ? '已设置' : '未设置' }}</text>
      </view>
      
      <view class="security-item" @tap="manageLoginDevices">
        <text class="security-text">登录设备管理</text>
        <text class="security-status">{{ userInfo.loginDevices }}台设备</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        nickname: '微信用户',
        avatar: '/static/avatar.svg',
        gender: 0, // 0: 未知, 1: 男, 2: 女
        region: ['广东省', '深圳市', '南山区'],
        signature: '这个人很懒，什么都没有留下...',
        phone: '',
        hasPaymentPassword: false,
        loginDevices: 1
      },
      originalInfo: null,
      hasChanges: false
    };
  },
  onLoad() {
    // 从本地存储获取用户信息
    const loginInfo = uni.getStorageSync('demo_login_info');
    if (loginInfo && loginInfo.nickname) {
      this.userInfo.nickname = loginInfo.nickname;
    }
    // 保存原始信息用于比较
    this.originalInfo = JSON.parse(JSON.stringify(this.userInfo));
  },
  methods: {
    // 返回上一页
    goBack() {
      if (this.hasChanges) {
        uni.showModal({
          title: '提示',
          content: '您有未保存的修改，确定要离开吗？',
          success: (res) => {
            if (res.confirm) {
              uni.navigateBack();
            }
          }
        });
      } else {
        uni.navigateBack();
      }
    },
    
    // 更改头像
    changeAvatar() {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          // 更新头像
          this.userInfo.avatar = res.tempFilePaths[0];
          this.hasChanges = true;
          
          // 显示提示
          this.showToast('头像已更新');
        }
      });
    },
    
    // 显示性别选择器
    showGenderPicker() {
      const genderList = ['未知', '男', '女'];
      
      uni.showActionSheet({
        itemList: genderList,
        success: (res) => {
          if (res.tapIndex !== -1) {
            this.userInfo.gender = res.tapIndex;
            this.hasChanges = true;
          }
        }
      });
    },
    
    // 获取性别文本
    getGenderText(gender) {
      const genderMap = ['未知', '男', '女'];
      return genderMap[gender] || '未知';
    },
    
    // 显示地区选择器
    showRegionPicker() {
      // 从本地存储获取当前地址
      const currentLocation = wx.getStorageSync('currentLocation');
      
      if (currentLocation && currentLocation.address) {
        // 解析地址信息，尝试提取省市区
        let province = '广东省';
        let city = '深圳市';
        let district = '南山区';
        
        // 简单的地址解析逻辑
        const address = currentLocation.address;
        if (address.includes('省')) {
          province = address.substring(0, address.indexOf('省') + 1);
        }
        
        if (address.includes('市')) {
          const startIndex = address.indexOf('市') - 2;
          if (startIndex > 0) {
            city = address.substring(startIndex, address.indexOf('市') + 1);
          }
        }
        
        if (address.includes('区')) {
          const startIndex = address.lastIndexOf('区') - 2;
          if (startIndex > 0) {
            district = address.substring(startIndex, address.lastIndexOf('区') + 1);
          }
        }
        
        this.userInfo.region = [province, city, district];
        this.hasChanges = true;
        
        this.showToast('地区已更新为当前位置');
      } else {
        // 如果没有位置信息，使用默认值
        const newRegion = ['广东省', '深圳市', '南山区'];
        this.userInfo.region = newRegion;
        this.hasChanges = true;
        
        this.showToast('地区已更新');
      }
    },
    
    // 获取地区文本
    getRegionText() {
      return this.userInfo.region.join(' ');
    },
    
    // 绑定手机号
    bindPhone() {
      if (this.userInfo.phone) {
        uni.showModal({
          title: '提示',
          content: '您已绑定手机号，是否更换绑定？',
          confirmText: '更换',
          success: (res) => {
            if (res.confirm) {
              this.doBindPhone();
            }
          }
        });
      } else {
        this.doBindPhone();
      }
    },
    
    // 执行绑定手机号
    doBindPhone() {
      // 模拟绑定手机号
      // 实际项目中应该调用微信的获取手机号API
      uni.showLoading({
        title: '获取中...'
      });
      
      setTimeout(() => {
        uni.hideLoading();
        // 模拟成功获取到手机号
        this.userInfo.phone = '138****6789';
        this.hasChanges = true;
        
        this.showToast('手机号绑定成功');
      }, 1500);
    },
    
    // 设置支付密码
    setPaymentPassword() {
      if (this.userInfo.hasPaymentPassword) {
        uni.showModal({
          title: '提示',
          content: '您已设置支付密码，是否修改？',
          confirmText: '修改',
          success: (res) => {
            if (res.confirm) {
              this.doSetPaymentPassword();
            }
          }
        });
      } else {
        this.doSetPaymentPassword();
      }
    },
    
    // 执行设置支付密码
    doSetPaymentPassword() {
      // 模拟设置支付密码
      // 实际项目中应该跳转到支付密码设置页面
      this.userInfo.hasPaymentPassword = true;
      this.hasChanges = true;
      
      this.showToast('支付密码设置成功');
    },
    
    // 管理登录设备
    manageLoginDevices() {
      // 模拟管理登录设备
      // 实际项目中应该跳转到登录设备管理页面
      uni.showModal({
        title: '登录设备管理',
        content: '当前设备：微信小程序\n\n上次登录：今天 10:30 深圳市',
        showCancel: false,
        confirmText: '我知道了'
      });
    },
    
    // 保存修改
    saveChanges() {
      if (!this.hasChanges) {
        return;
      }
      
      uni.showLoading({
        title: '保存中...'
      });
      
      // 模拟保存操作
      setTimeout(() => {
        // 保存成功后更新原始信息
        this.originalInfo = JSON.parse(JSON.stringify(this.userInfo));
        this.hasChanges = false;
        
        uni.hideLoading();
        uni.showToast({
          title: '保存成功',
          icon: 'success'
        });
      }, 800);
    },
    
    // 显示提示
    showToast(message) {
      uni.showToast({
        title: message,
        icon: 'none'
      });
    }
  },
  // 监听数据变化，检查是否有修改
  watch: {
    userInfo: {
      handler() {
        // 简单比较是否有变化
        this.hasChanges = JSON.stringify(this.userInfo) !== JSON.stringify(this.originalInfo);
      },
      deep: true
    }
  }
};
</script>

<style scoped>
.account-info-container {
  height: 100vh;
  background-color: #f8f9fc;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* 顶部栏 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 40rpx;
  background-color: #fff;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.back-btn {
  padding: 10rpx;
}

.back-icon {
  font-size: 32rpx;
  color: #333;
}

.header-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
}

.save-btn {
  padding: 10rpx 20rpx;
  border-radius: 40rpx;
}

.save-btn.disabled {
  opacity: 0.5;
}

.save-text {
  font-size: 32rpx;
  color: #667eea;
  font-weight: 500;
}

/* 头像设置 */
.avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60rpx 0;
  background-color: #fff;
  margin-bottom: 20rpx;
}

.avatar-container {
  position: relative;
  margin-bottom: 20rpx;
}

.user-avatar {
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
}

.avatar-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.avatar-container:active .avatar-mask {
  opacity: 1;
}

.edit-icon {
  font-size: 48rpx;
  color: #fff;
}

.avatar-hint {
  font-size: 28rpx;
  color: #666;
}

/* 基本信息 */
.info-section {
  background-color: #fff;
  margin-bottom: 20rpx;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 40rpx;
  border-bottom: 1rpx solid #eee;
}

.info-item:last-child {
  border-bottom: none;
}

.info-label {
  font-size: 32rpx;
  color: #666;
  width: 140rpx;
}

.info-input {
  font-size: 32rpx;
  color: #333;
  flex: 1;
  text-align: right;
  padding: 10rpx 0;
}

.gender-selector,
.region-selector {
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: flex-end;
}

.gender-text,
.region-text {
  font-size: 32rpx;
  color: #333;
  margin-right: 10rpx;
}

.arrow-icon {
  font-size: 28rpx;
  color: #999;
}

/* 安全设置 */
.security-section {
  background-color: #fff;
  padding: 40rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 30rpx;
  display: block;
}

.security-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 0;
  border-bottom: 1rpx solid #eee;
}

.security-item:last-child {
  border-bottom: none;
}

.security-text {
  font-size: 32rpx;
  color: #333;
}

.security-status {
  font-size: 28rpx;
  color: #999;
}
</style>